import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import Vuex from 'vuex'
import {SOME_MUTATION} from './mutaion-types'

Vue.use(ElementUI)
Vue.use(Vuex)

const moduleA = {
  namespaced: true,
  state: {
    count: 3
  },
  actions: {
    increateIfOddRootSum({ state,commit,rootState,rootGetters }){ //dispatch['moduleA/increateIfOddRootSum']
      commit("commitA")
    }
  },
  mutations: {
      commitA ({state,commit}) {

      }
  },
  getters: {
    sumWithRootCount(state,getters,rootState,rootGetters){ //getters['moduleA/sumWithRootCount']
        return state.count + rootState.count
      }
  }
}

const moduleB = {
  namespaced: true,
  state: {
    count: 2
  },
  actions: {
    increateIfOddRootSum({ state,commit,rootState }){
    }
  },
  mutations: {

  },
  getters: {
      sumWithRootCount(state,getters,rootState,rootGetters){
        return state.count + rootState.count
      }
  }
}


const store = new Vuex.Store({
  modules: {
    moduleA: moduleA,
    moduleB: moduleB
  },
  state:{
    count: 10,
    list : [
      {id:1,text:'hello'},
      {id:2,text:'what'}
    ]
  },
  actions: {
      actionA ({commit,state},products) {
        commit(SOME_MUTATION,products)
      },
      actionInreacte({commit,state},products){
        return new Promise((resolve,reject) => {
          setTimeout(() => {
            commit(SOME_MUTATION,products)
          }, 1000);
          resolve()
        })
      }
  },
  mutations: {
    inreatment (state,playload) {
      state.count += playload
    },
    [SOME_MUTATION] (state,count){
      state.count +=count
    }

  },
  getters: {
    doToos: state => {
      return state.list.filter(todo => todo.id>1)
    },
    doLength: (state,getters) => {
      return getters.doToos.length
    },
    getListById: (state) => (id) => {
      return state.list.find(todo => todo.id === id)
    }
    
  }
})
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})
